<template>
  <div>
    <!-- 弹出框 -->
    <popup-form  :popup="popup" @getspecslist="getspecslist"  ref="child"></popup-form>
    <!-- 表格 -->
    <list :specslist="specslist" @add="add" @getspecslist="getspecslist" @edit="edit"></list>
  </div>
</template>

<script>
import popupForm from "./components/form.vue";
import list from "./components/list.vue";

export default {
  props: {},
  data() {
    return {
      specslist: [],
      page:{
        size:20,
        page:1
      },
      popup:{
        flag: false
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getspecslist();
  },
  watch: {},
  methods: {
    getspecslist() {  // 获取列表数据
      this.$api.getspecslist(this.page).then((res) => {
        this.specslist = res.data.list
      });
    },
    add(){  // 弹出框状态
        this.popup.flag = true
    },
    edit(val){ // 编辑回填
      let arr = []
      val.attrs.forEach((item) => {
        arr.push({
          value:item
        })
      })
      this.$refs.child.dynamicValidateForm.domains = arr
      this.$refs.child.form = val
      console.log(this.$refs.child.dynamicValidateForm.domains);
      this.popup.flag = true
    }
  },
  components: {
    list,
    popupForm,
  },
};
</script>

<style scoped lang="scss">
</style>
